<template>
  <div class="personal-center">
    <header>
      <h1>招商银行个人中心</h1>
    </header>
    <nav>
      <ul>
        <li><router-link to="/info">个人信息</router-link></li>
        <li><router-link to="/balance">账户余额</router-link></li>
        <li><router-link to="/bank">银行卡</router-link></li>
        <li><router-link to="/password">修改密码</router-link></li>
      </ul>
    </nav>
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'PersonalCenter',
});
</script>

<style scoped>
.personal-center {
  font-family: Arial, sans-serif;
}
/* 添加更多样式以确保页面美观 */
</style>